<!--  -->
<template>
  <div class="collect">
      <!-- <HeaderTop title="产品收藏"></HeaderTop> -->
      <div class="container" :style="{ height: wrapperHeight + 'px' }" ref='wrapper'>
               <mt-loadmore class="collect_main" v-if='collectList&&collectList.length' :top-method="loadTop" :bottom-method="loadBottom" :style="{ height: wrapperHeight + 'px' }" :bottom-all-loaded="allLoaded" :bottom-drop-text="bottomText"  ref="loadmore">
                    <ul class="collect_ul" :style="{height:'auto',marginBottom: '10px',minHeight: wrapperHeight + 'px'}" v-if="collectList&&collectList.length">
                    <li class="collect_item" style="position:relative;display:flex;padding:20px 0;margin:0 20px;border-bottom:1px solid #656565" v-for="(item,index) in collectList" :key="index" @click="showGoodsDetail(item.id)">
                        <img :src="item.coverImg" alt="" style="width:200px;height:200px;border-radius:10px">
                        <div class="title" style="font-size:28px;display:flex;flex-direction:column;justify-content:space-between;margin-left:20px;padding:30px">
                            <h3>{{item.goodsName}}</h3>
                            <p style="color:red">￥{{item.price}}</p>
                        </div>
                        <img class="del" style="width:30px;height:30px;position:absolute;right:0" src="../../assets/img/shanchu.png" @click.stop="delCollect(item.id)">
                    </li>
                     <p v-if="allLoaded" style="text-align:center;color:#656565;margin-top:20px" class='allloaded'>已加载全部</p>
                    </ul>
                </mt-loadmore>
                <!-- <div v-else class='nodata'>暂无收藏</div> -->
                <div v-else  class='nodata'> <img class="nodataImg" src="../../assets/img/noData.png" alt=""> </div>
      </div>
  </div>
</template>

<script>
// import HeaderTop from '../HeaderTop/HeaderTop'
import {mapState} from 'vuex'
import {mapActions} from 'vuex'
import { Loadmore } from 'mint-ui'
export default {
    data () {
        return {
            userId:null,
            token:'',
            num:1,
            size:6,
            allLoaded:false,
            autofill:false,
            bottomText:"上拉加载更多",
            loadMoreConfig:{
                bottomDistance:100,
            },
            collectList:[],
            wrapperHeight:'100%'
        };
    },

    components: {
        'mt-loadmore':Loadmore
    },

    computed: {
        // ...mapState(['userInfo','collectList'])
        ...mapState(['userInfo'])
    },

    created(){
        console.log(this.$route)
        console.log(this.userInfo)
        this.userId = this.userInfo.userInfo.id
        this.token = this.userInfo.token
        this.getMyCollectList()
    },
    mounted(){
          this.wrapperHeight = document.documentElement.clientHeight - this.$refs.wrapper.getBoundingClientRect().top;
    },
    methods: {
        async delCollect(goodsId){
            // console.log('我是删除',goodsId)
            const result = await this.API.reqCancelCollect({userId:this.userId,token:this.token,goodsId,code:2})
            console.log(result)
            if(result.retCode === '000'){
                this.$toast('取消收藏成功')
                this.getMyCollectList()
            }
        },
       async getMyCollectList(){
          let result = await this.API.reqCollectList({userId:this.userId,token:this.token,num:this.num,size:this.size})
            if(result.retCode === '000'){
                this.collectList = result.retData
                console.log(result.retData)
            }
        },
        // ...mapActions(['getMyCollectList']),
        showGoodsDetail(id){
            console.log('去看商品详情',id)
            this.$router.push({path:'/goodsdetail', query:{id:id}})
        },
        //获取更多数据
        async getListDataPull(){
            //  this.userId = this.userInfo.userInfo.id
            //  this.token = this.userInfo.token
            console.log('num',this.num)
            let result = await this.API.reqCollectList({userId:this.userId,token:this.token,num:this.num,size:this.size})
            console.log(result)
            if(result.retData==''||result.retData==[]||result.retData==null){
                this.isHaveMore(false) //禁止上拉
            }else{
                this.evalList = this.evalList.concat(result.retData?result.retData:[]);
                this.isHaveMore(true)
            }
        },
        //下拉刷新
       loadTop(){
         let self = this;
         this.num = 1;
         this.allLoaded = false;
         setTimeout(function(){
           
           if(self.$refs.loadmore){
            self.$refs.loadmore.onTopLoaded();
           }
           self.getMyCollectList();
           
        },1000)
       },
       // 上拉加载
        loadBottom(){
            let self = this;
            self.num ++;
            console.log('loadmore',this.num)
            setTimeout(function(){
                if(this.collectList){
                  self.$refs.loadmore.onBottomLoaded();
                }
                 self.getListDataPull();
            },1000)
        },
        isHaveMore(isHaveMore){
            this.allLoaded = true; //true是禁止上拉加载
            if(isHaveMore){
              this.allLoaded = false;
            }
        },

    }
}

</script>

<style lang='stylus' scoped>
@import "../../common/stylus/mixins.styl"
.collect
    padding-bottom 0 !important
    width 100%
    height 100%
    background #fff
    .container
       height 100%
       .nodata
            text-align center
            width 100%
            font-size 20px
            line-height 20px
            padding-top 30px
            .nodataImg
                width 150px
        .collect_ul
            height 100%
            overflow-y scroll

</style>